<template>
  <div class="credit-records-page">
    <h1>信用记录</h1>

    <!-- 搜索筛选 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="关键词">
          <el-input v-model="searchForm.query" placeholder="描述/详情" clearable />
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="选择状态" clearable>
            <el-option label="守约" value="守约"></el-option>
            <el-option label="未守约" value="未守约"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-tabs v-model="activeTab" class="credit-tabs">
      <el-tab-pane label="医疗订单" name="medical">
        <div class="order-list">
          <el-card v-for="order in filteredOrdersByType('医疗')" :key="order.id" class="order-card">
            <div class="order-header">
              <span class="order-description">{{ order.description }}</span>
              <el-tag :type="order.status === '守约' ? 'success' : 'danger'">{{ order.status }}</el-tag>
            </div>
            <div class="order-details">
              <p>日期：{{ order.date }}</p>
              <p v-if="order.details">详情：{{ order.details }}</p>
            </div>
          </el-card>
          <el-empty v-if="filteredOrdersByType('医疗').length === 0" description="暂无医疗订单记录"></el-empty>
        </div>
      </el-tab-pane>

      <el-tab-pane label="出行订单" name="travel">
        <div class="order-list">
          <el-card v-for="order in filteredOrdersByType('出行')" :key="order.id" class="order-card">
            <div class="order-header">
              <span class="order-description">{{ order.description }}</span>
              <el-tag :type="order.status === '守约' ? 'success' : 'danger'">{{ order.status }}</el-tag>
            </div>
            <div class="order-details">
              <p>日期：{{ order.date }}</p>
              <p v-if="order.details">详情：{{ order.details }}</p>
            </div>
          </el-card>
          <el-empty v-if="filteredOrdersByType('出行').length === 0" description="暂无出行订单记录"></el-empty>
        </div>
      </el-tab-pane>

      <el-tab-pane label="停车订单" name="parking">
        <div class="order-list">
          <el-card v-for="order in filteredOrdersByType('停车')" :key="order.id" class="order-card">
            <div class="order-header">
              <span class="order-description">{{ order.description }}</span>
              <el-tag :type="order.status === '守约' ? 'success' : 'danger'">{{ order.status }}</el-tag>
            </div>
            <div class="order-details">
              <p>日期：{{ order.date }}</p>
              <p v-if="order.details">详情：{{ order.details }}</p>
            </div>
          </el-card>
          <el-empty v-if="filteredOrdersByType('停车').length === 0" description="暂无停车订单记录"></el-empty>
        </div>
      </el-tab-pane>

      <el-tab-pane label="图书借阅记录" name="library">
        <div class="order-list">
          <el-card v-for="order in filteredOrdersByType('图书')" :key="order.id" class="order-card">
            <div class="order-header">
              <span class="order-description">{{ order.description }}</span>
              <el-tag :type="order.status === '守约' ? 'success' : 'danger'">{{ order.status }}</el-tag>
            </div>
            <div class="order-details">
              <p>日期：{{ order.date }}</p>
              <p v-if="order.details">详情：{{ order.details }}</p>
            </div>
          </el-card>
          <el-empty v-if="filteredOrdersByType('图书').length === 0" description="暂无图书借阅记录"></el-empty>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const activeTab = ref('medical')

const searchForm = ref({
  query: '',
  dateRange: [],
  status: '',
})

const mockOrders = ref([
  { id: 1, type: '医疗', description: '2023-01-15 医院挂号', date: '2023-01-15', status: '守约', details: '已按时就诊并支付费用。' },
  { id: 2, type: '出行', description: '2023-02-01 共享单车订单', date: '2023-02-01', status: '守约', details: '已按时归还车辆。' },
  { id: 3, type: '停车', description: '2023-03-10 停车场停车费', date: '2023-03-10', status: '未守约', details: '停车超时未及时缴费，产生滞纳金。' },
  { id: 4, type: '图书', description: '2023-04-05 《Vue.js 实战》借阅', date: '2023-04-05', status: '守约', details: '已按时归还图书。' },
  { id: 5, type: '医疗', description: '2023-05-20 体检预约', date: '2023-05-20', status: '未守约', details: '未能按时前往体检，预约作废。' },
  { id: 6, type: '出行', description: '2023-06-10 网约车订单', date: '2023-06-10', status: '守约', details: '顺利完成行程。' },
  { id: 7, type: '停车', description: '2023-07-01 路边停车缴费', date: '2023-07-01', status: '守约', details: '已按规定缴纳停车费。' },
  { id: 8, type: '图书', description: '2023-08-12 《深入理解JavaScript》借阅', date: '2023-08-12', status: '未守约', details: '超期未还，产生罚款。' },
])

const applyFilters = (orders) => {
  let filtered = orders

  // 关键词过滤
  if (searchForm.value.query) {
    const query = searchForm.value.query.toLowerCase()
    filtered = filtered.filter(order =>
      order.description.toLowerCase().includes(query) ||
      (order.details && order.details.toLowerCase().includes(query))
    )
  }

  // 日期范围过滤
  if (searchForm.value.dateRange && searchForm.value.dateRange.length === 2) {
    const [startDate, endDate] = searchForm.value.dateRange
    filtered = filtered.filter(order => {
      return order.date >= startDate && order.date <= endDate
    })
  }

  // 状态过滤
  if (searchForm.value.status) {
    filtered = filtered.filter(order => order.status === searchForm.value.status)
  }

  return filtered
}

const filteredOrdersByType = computed(() => (type) => {
  const ordersOfType = mockOrders.value.filter(order => order.type === type)
  return applyFilters(ordersOfType)
})

const handleSearch = () => {
  // 触发 computed 属性重新计算
}

const resetSearch = () => {
  searchForm.value = {
    query: '',
    dateRange: [],
    status: '',
  }
  // 触发 computed 属性重新计算
}
</script>

<style lang="scss" scoped>
.credit-records-page {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
}

h1 {
  font-size: 26px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.search-bar {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form .el-form-item {
  margin-right: 20px;
  margin-bottom: 0;
}

.credit-tabs {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.order-list {
  padding: 20px 0;
}

.order-card {
  margin-bottom: 15px;
  border-radius: 8px;
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .order-description {
      font-size: 18px;
      font-weight: bold;
      color: #303133;
    }
  }
  .order-details {
    font-size: 14px;
    color: #606266;
    p {
      margin: 5px 0;
    }
  }
}
</style> 